<template>
	<view class="certificate border-box">
		<u-navbar title="查看证书" bgColor="#333333" safeAreaInsetTop leftIconColor="#ffffff" @leftClick="toPage"
			placeholder titleStyle="{fontSize: 16px;font-weight: bold;color: #FFFFFF;}">
		</u-navbar>
		<view class="certificate-wrap" v-if="detail">
			<view class="content" id="content" :style="apiTypeState == 2 ? '':'background-color: #000000;'">
				<!-- :style="`background-image: url(${detail.share_cert_bg_image});background-repeat: no-repeat; background-size: 100% 100%;`" -->
				<img v-if="apiTypeState == 2" :src="detail.share_cert_bg_image" class="posters" />
				<view style="position: relative; z-index: 2;">
					<view class="banner border-box">
						<img v-if="apiTypeState == 1" :src="detail.image" width="100%" height="320" />
						<img v-else :src="detail.nft_img_url" width="100%" height="320" />
					</view>
					<view class="content-wrap">
						<view class="flex-no-horizontal space-between m-b-20">
							<view class="f-xl" v-if="apiTypeState == 1">{{ detail.title}}</view>
							<view class="f-xl" v-else>{{ detail.name || detail.nft_title }}</view>
							<img src="https://cdn3.relaverse.cn/uploads/images/0402/16488905700005956.png" width="29"
								height="29" />
						</view>

						<view v-if="apiTypeState == 1">
							<view class="flex-no-horizontal space-between f-xxs m-b-10">
								<view>版权方</view>
								<view>{{ detail.message }}</view>
							</view>
							<view class="flex-no-horizontal space-between f-xxs m-b-10">
								<view>发行方</view>
								<view>轻松小镇</view>
							</view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10" v-else
							v-for="(item, key ,index) in detail.publisher_conf" :key="index">
							<view>{{key}}</view>
							<view>{{item}}</view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10">
							<view>拥有者</view>
							<view>{{ user.nickname }}</view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10">
							<view>铸造时间</view>
							<view v-if="apiTypeState == 1">{{ detail.create_time | date('yyyy-mm-dd hh:MM')}}</view>
							<view v-else>{{ detail.created_at | date('yyyy-mm-dd hh:MM')}}</view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10">
							<view>藏品编号</view>
							<view v-if="apiTypeState == 1">{{ detail.title }} {{ detail.number }} </view>
							<view v-else>{{detail.nft_name}}#{{ detail.token_id }} </view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10">
							<view>区块链</view>
							<view v-if="apiTypeState == 1">百度超级链</view>
							<view v-else>{{detail.nft_message}}</view>
						</view>
						<view class="flex-no-horizontal space-between f-xxs m-b-10">
							<view>链上藏品ID</view>
							<view v-if="apiTypeState == 1">{{ detail.shard_id }}</view>
							<view v-else>{{ detail.token_id }}</view>
						</view>
						<view class="flex-no-horizontal space-between hash f-xxs m-b-15">
							<view>交易哈希</view>
							<view v-if="apiTypeState == 1" class="hash-right text-right">
								{{ detail.tx_id }}
							</view>
							<view v-else-if="detail.nft_hash" class="hash-right text-right">
								{{ detail.nft_hash }}
							</view>
							<view v-else class="hash-right text-right">
								上链中
							</view>
						</view>
						<view class="bottoms" v-if="apiTypeState == 2">

						</view>
						<view class="bottom space-between " v-if="apiTypeState == 1">
							<img src="https://cdn3.relaverse.cn/uploads/images/0402/1648890565000c60e.png" width="69"
								height="23" />
							<view class="bottom">
								<view style="font-size: 9px;" class="m-r-5">
									扫码注册轻松小镇<br>
									获得你的专属数字藏品
								</view>
								<view class="weichat">
									<img src="https://cdn3.relaverse.cn/uploads/images/0402/16488905750004af6.png"
										style="display: block;" width="60" height="60" />
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="share" @click="html2canvas.create">
				<u--image src="../../static/img/c-share.png" width="28" height="24"></u--image>
				<view class="f-xxs transparent m-t-5">分享</view>
			</view>
		</view>
		<u-overlay :show="isShowPoster" @click="isShowPoster = false">
			<view class="warp" style="overflow: scroll">
				<view class="rect" @tap.stop>
					<view class="up border-box">
						<view class="up-poster">
							<image :src="base64" class="poster" mode="heightFix"></image>
						</view>
					</view>
					<view class="down p-20">
						<view class="text-center f-xs m-b-20 transparent">分享到</view>
						<view class="flex-no-horizontal down-share m-b-20">
							<view class="share-item" @click="shareSceneSession">
								<view class="share-item-up m-b-10">
									<u--image src="/static/img/shareFriend1.png" width="40" height="40"></u--image>
								</view>
								<view class="text-center f-xs">微信好友</view>
							</view>
							<view class="share-item" @click="shareTimeline">
								<view class="share-item-up m-b-10">
									<u--image src="/static/img/shareFriend2.png" width="40" height="40"></u--image>
								</view>
								<view class="text-center f-xs">朋友圈</view>
							</view>
							<view class="share-item">
								<view class="share-item-up m-b-10" @click="save">
									<u--image src="/static/img/shareFriend3.png" width="40" height="40"></u--image>
								</view>
								<view class="text-center f-xs">保存本地</view>
							</view>
						</view>
						<view class="text-center f-xs transparent" @click="isShowPoster = false">取消</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<view style="position: relative;z-index: 9999;">
			<u-loading-page :loading="loadingShowType" color="#FFFFFF" loading-color="#FFFFFF" font-size="18" loading-mode="semicircle" bg-color="#343434" loading-text="图片生成中..."></u-loading-page>
		</view>
	</view>
</template>

<script>
	import {
		getBenDetail,
		nftDetails
	} from '../../api/collection.js'
	import {
		mapState
	} from 'vuex'
	import {
		shareFriend,
		shareMoment,
		saveAlbum,
		judgeIosPermissionPhotoLibrary
	} from '../../utility/share.js'
	export default {
		data() {
			return {
				isShowPoster: false,
				base64: '',
				id: '',
				detail: {},
				boxType: "",
				loadingShowType: true,
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		onLoad(option) {
			this.id = option.id
			this.apiTypeState = option.apiTypeState
			this.boxType = option.collectionType
			if (this.apiTypeState == 1) {
				this.getDetail()
			} else {
				this.getOnDetail();
			}
		},
		methods: {
			async getOnDetail() {
				this.loadingShowType = true
				try {
					const res = await nftDetails({
						boxId: this.id,
						boxType: this.boxType
					})
					this.detail = res.data
					this.loadingShowType = false
					console.log(11, this.detail)
				} catch (e) {
					console.log(e)
					this.loadingShowType = false
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			async getDetail() {
				this.loadingShowType = true
				try {
					const res = await getBenDetail({
						shard_id: this.id
					})
					this.detail = res.data.data
					this.loadingShowType = false
				} catch (e) {
					console.log(e)
					this.loadingShowType = false
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			toPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			showLoading() {
				uni.showLoading({
					title: '生成海报中...'
				})
			},
			renderFinish(option) {
				this.base64 = option.path
				uni.hideLoading()
				this.isShowPoster = true
			},
			shareSceneSession() {
				shareFriend(this.base64)
			},
			shareTimeline() {
				shareMoment(this.base64)
			},
			save() {
				judgeIosPermissionPhotoLibrary(this.base64)
			},

		}
	}
</script>
<script module="html2canvas" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		methods: {
			create() {
				this.$ownerInstance.callMethod('showLoading', true)
				const timer = setTimeout(async () => {
					try {
						const dom = document.getElementById('content')
						const canvas = await html2canvas(dom, {
							width: dom.offsetWidth, //设置canvas尺寸与所截图尺寸相同，防止白边
							height: dom.offsetHeight - 2, //防止白边
							logging: true,
							useCORS: true,
							scale: 3,
							scrollY: 0
						})
						const base64 = canvas.toDataURL('image/jpeg', 1);
						this.$ownerInstance.callMethod('renderFinish', {
							path: base64
						})
						clearTimeout(timer)
					} catch (e) {
						this.$ownerInstance.callMethod('hideLoading', true)
						console.log(e)
					}
				}, 0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.certificate {
		min-height: 100%;
		background-color: #333333;
		// background: url(../../static/img/certificate-bg.jpg) no-repeat;
		background-size: 100% 100%;
		color: white;
		padding-bottom: 40rpx;

		.space-between {
			justify-content: space-between;
		}

		.transparent {
			opacity: 0.3;
		}

		.certificate-wrap {
			padding: 0 70rpx;

			::v-deep .u-image__image {
				>div {
					background-image: none !important;
				}

				>img {
					opacity: 1;
				}
			}
		}

		.content {
			// background-color: #000000;
			// background: url(../../static/img/certificate-c-bg.png) no-repeat;
			background-size: 100% 100%;
			position: relative;
			.posters{
				position: absolute;
				height: 100%;
				width: 100%;
				// z-index: -1;
			}
			// .banner{
			// 	padding: 0 20rpx;
			// }
			.content-wrap {
				padding: 36rpx;

				.hash {
					align-items: flex-start;

					.hash-right {
						width: 70%;
						word-break: break-word;
					}
				}

				.weichat {
					background-color: white;
					padding: 5rpx;
				}

				.bottoms {
					width: 100%;
					height: 128rpx;
				}

				.bottom {
					display: flex;
					align-items: flex-end;
				}
			}
		}

		.share {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30rpx;
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 100%;
				height: 100%;
				background-color: #000000;

				.up {
					padding: 90rpx 70rpx 40rpx;
					background-color: #333333;

					.up-poster {
						background-color: #333333;
						height: 1134rpx;
						display: flex;
						justify-content: center;

						.poster {
							width: 100%;
							height: 100%;
						}
					}
				}

				.down {
					background-color: #000000;

					.down-share {
						justify-content: space-around;

						.share-item-up {
							width: 94rpx;
							height: 94rpx;
							background: #151515;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>
